<template>
	<view v-if="envelopeShow">
		<view class="share-red-bag" @click="toRedEnvelope"></view>
		<uni-popup ref="popup" type="center">
			<view class="share-red-container">
				<view class="title">天天抢红包</view>
				<view class="txt">最高可得{{envelopeShow.view_total}}元</view>
				<image class="red_bag_bg" src="https://static.member.stourweb.cn/uniapp/static/images/red_bag_bg.png" mode="scaleToFill" @click="clickJoin(envelopeShow)"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			ordersn: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				envelopeShow: null
			};
		},
		mounted(){
			var token = uni.getStorageSync('token');
			
			if(!token){
				return
			}
			this.getOrderEnvelope()
		},
		created(){
			
		},
		methods: {
			// 检查是否有支付成功红包
			async getOrderEnvelope(){
				let params = {
					method: 'api/v2/envelope/get_order_envelope_info',
					order_sn: this.ordersn,
				};
				let res = await this.$http(params);
				if (res.status) {
					this.envelopeShow = res.data.envelope_info;
				}
			},
			
			// 前往红包页面
			toRedEnvelope(){
				this.$refs.popup.open()
			},
			
			clickJoin(item){
				this.$refs.popup.close()
				setTimeout(() => {
					uni.navigateTo({
						url:`/subPackages/redEnvelope/receive?envelopeid=${item.id}`
					})
				}, 300)
			}
			
		}
	}
</script>

<style lang="scss">
.share-red-bag{
	position: fixed;
	top: 40%;
	right: 0;
	z-index: 1;
	width: 236rpx;
	height: 480rpx;
	background: url("https://static.member.stourweb.cn/uniapp/static/images/red_bag.png") center no-repeat;
	background-size: contain;
}
.share-red-container{
	width: 800rpx;
	height: 990rpx;
	position: relative;
	animation: fadeIn 1s forwards;
	.title{
		position: absolute;
		top: 226rpx;
		left: 50%;
		z-index: 10;
		font-size: 68rpx;
		font-weight: bold;
		transform: translateX(-50%);
		background: linear-gradient(146deg, #FFBB55 0%, #FFF5D1 51%, #FFA755 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.txt{
		position: absolute;
		top: 340rpx;
		left: 50%;
		z-index: 10;
		font-size: 48rpx;
		font-weight: bold;
		transform: translateX(-50%);
		background: linear-gradient(270deg, #FFEECD 0%, #FFEC8E 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}
.red_bag_bg{
	width: 800rpx;
	height: 990rpx;
}
@keyframes fadeIn{
	0%{
		opacity: 0;
		transform: scale(0)
	}
	100%{
		opacity: 1;
		transform: scale(1) rotateY(360deg);
	}
}
</style>
